<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="toolbar"></div>
<script>
    var initCesium = new InitCesium();
    var viewer = initCesium.initViewer('cesiumContainer',  {
        terrainProvider: Cesium.createWorldTerrain()
    });

    // Tropics of Cancer and Capricorn
    var coffeeBeltRectangle = Cesium.Rectangle.fromDegrees(-180.0, -23.43687, 180.0, 23.43687);

    viewer.scene.globe.cartographicLimitRectangle = coffeeBeltRectangle;
    viewer.scene.skyAtmosphere.show = false;

    // Add rectangles to show bounds
    var rectangles = [];

    for (var i = 0; i < 10; i++) {
        rectangles.push(viewer.entities.add({
            rectangle : {
                coordinates : coffeeBeltRectangle,
                material : Cesium.Color.WHITE.withAlpha(0.0),
                height : i * 5000.0,
                outline : true,
                outlineWidth : 4.0,
                outlineColor : Cesium.Color.WHITE
            }
        }));
    }

    Sandcastle.addToggleButton('Limit Enabled', true, function(checked) {
        if (checked) {
            viewer.scene.globe.cartographicLimitRectangle = coffeeBeltRectangle;
        } else {
            viewer.scene.globe.cartographicLimitRectangle = Cesium.Rectangle.MAX_VALUE;
        }
    });

    Sandcastle.addToggleButton('Show Bounds', true, function(checked) {
        var rectanglesLength = rectangles.length;
        for (var i = 0; i < rectanglesLength; i++) {
            var rectangleEntity = rectangles[i];
            rectangleEntity.show = checked;
        }
    });


</script>
</body>
</html>